<!--
 * @Author: your name
 * @Date: 2021-02-20 15:43:16
 * @LastEditTime: 2021-02-20 15:49:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \demoe:\前端开发学习\hmtt\hm63-hmtt-wsh\src\views\home\main\main.vue
-->

<template>
  <div class="main">
    <!-- 导航栏 -->
    <van-nav-bar class="mian-nav-bar">
      <template #left>
        <i class="iconfont left" @click="showPopup">&#xe65c;</i>
      </template>
      <template #title>
        <div class="title" @click="goSearch()">
          <i class="iconfont">&#xe613;</i
          ><span class="title-txt">请输入搜索关键词</span>
        </div>
      </template>
      <template #right>
        <i class="iconfont right" @click="goSearch()">&#xe613;</i>
      </template>
    </van-nav-bar>

    <!-- 横向滚动导航 -->
    <div class="tagList">
      <div
        class="tag "
        v-for="(item, index) in channelsList"
        :key="index"
        @click="cutList(index, item.id)"
      >
        <div class="tag-txt " :class="{ active: index === currIndex }">
          {{ item.name }}
        </div>
      </div>
    </div>

    <!-- list列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="articleList"
          v-for="(item, index) in articlesList"
          :key="index"
          @click="goDetails(item.art_id)"
        >
          <div class="listItem" v-if="item.cover.type === 1">
            <div class="left">
              <div class="left-top van-multi-ellipsis--l2">
                {{ item.title }}
              </div>
              <div class="left-bottom">
                <div class="user">{{ item.aut_name }}</div>
                <div class="comment">{{ item.comm_count }}评论</div>
                <div class="time">{{ item.pubdate | formatTime }}</div>
              </div>
            </div>
            <img :src="item.cover.images[0]" alt="" class="right" />
          </div>

          <div class="listItem" v-else-if="item.cover.type === 0">
            <div class="left">
              <div class="left-top van-multi-ellipsis--l2">
                {{ item.title }}
              </div>
              <div class="left-bottom pt12">
                <div class="user">{{ item.aut_name }}</div>
                <div class="comment">{{ item.comm_count }}评论</div>
                <div class="time">{{ item.pubdate | formatTime }}</div>
              </div>
            </div>
          </div>

          <div class="listItem" v-else-if="item.cover.type === 3">
            <div class="left">
              <div class="left-top van-multi-ellipsis--l2">
                {{ item.title }}
              </div>
              <div class="imgList pt12">
                <img class="imgItem" :src="item.cover.images[0]" alt="" /><img
                  class="imgItem2"
                  :src="item.cover.images[1]"
                  alt=""
                /><img class="imgItem" :src="item.cover.images[2]" alt="" />
              </div>
              <div class="left-bottom pt12">
                <div class="user">{{ item.aut_name }}</div>
                <div class="comment">{{ item.comm_count }}评论</div>
                <div class="time">{{ item.pubdate | formatTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 弹出层 -->
    <van-popup
      v-model="showTag"
      position="bottom"
      :style="{ height: '30%' }"
      round
      >内容</van-popup
    >
  </div>
</template>

<script>
import { channels, articles } from '../../../api/main'
export default {
  data () {
    return {
      currIndex: 0, // 当前选中索引
      list: [],
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完成
      refreshing: false, // 下拉刷新
      channelsList: '', // tag导航列表
      articlesList: [], // 文章列表
      pre_timestamp: '', // 上一个时间戳
      channel_id: 2, // 频道默认id
      showTag: false // 弹出层隐藏
    }
  },

  created () {
    this.getChannels()
  },

  methods: {
    // 获取全部频道列表
    async getChannels () {
      const res = await channels()
      // console.log(res)
      this.channelsList = res.data.channels
    },

    // 频道切换
    cutList (index, id) {
      if (index === undefined) {
        index = 0
      }
      this.currIndex = index
      this.channel_id = id
      this.articlesList = []
      this.getArticles()
    },

    // 频道新闻推荐
    async getArticles () {
      const res = await articles({
        channel_id: this.channel_id,
        timestamp: new Date() - 0,
        with_top: 1
      })
      this.articlesList.push(...res.data.results)
      this.pre_timestamp = res.data.pre_timestamp
      this.loading = false
    },

    // 上拉加载
    onLoad () {
      if (this.pre_timestamp === null) {
        this.loading = false
        this.pre_timestamp = ''
        return
      }
      this.loading = true
      this.getArticles()

      this.refreshing = false
    },

    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      this.articlesList = []
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
      this.$toast.success('刷新成功')
    },

    // 弹出层
    showPopup () {
      this.showTag = true
    },

    // 跳转文章详情
    goDetails (id) {
      this.$router.push(`main/details?art_id=${id}`)
    },

    // 跳转搜索
    goSearch () {
      this.$router.push('search')
    }
  }
}
</script>

<style lang="less">
.main {
  .mian-nav-bar {
    background-color: @bg;
    .title {
      background-color: #fff;
      width: 225px;
      height: 32px;
      border-radius: 18px;
      line-height: 32px;
      font-size: 14px;
      color: #999;
      .iconfont {
        padding-right: 5px;
      }
    }
    .right {
      color: #fff;
      font-size: 20px;
    }
    .left {
      color: #fff;
      font-size: 26px;
    }
  }

  .tagList {
    display: flex;
    overflow: auto;

    .tag {
      flex: 1 0 auto;
      text-align: center;
      line-height: 36px;
      padding: 0 16px;

      .tag-txt {
        font-size: 14px;
      }
    }
    .active {
      border-bottom: 4px solid #5babfb;
    }
  }
  .tagList::-webkit-scrollbar {
    display: none;
  }

  .listItem {
    padding: 10px @p15;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 12px;
      .left-top {
        font-size: 16px;
      }
      .pt12 {
        padding-top: 12px;
      }
      .left-bottom {
        display: flex;
        font-size: 12px;
        .user {
          padding-right: 10px;
          color: #b4b4b4;
        }
        .comment {
          color: #b4b4b4;
          padding-right: 10px;
        }
        .time {
          color: #b4b4b4;
        }
      }
    }
    .imgList {
      display: flex;
      .imgItem,
      .imgItem2 {
        width: 116px;
        height: 73px;
      }
      .imgItem2 {
        padding: 0 3px;
      }
    }
    .right {
      width: 116px;
      height: 73px;
    }
  }
}
</style>
